<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>auto-fit</title>
		<style>
			body {
				font-family: 'Arial', sans-serif;
				background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
				padding: 20px;
			}

			.container {
				display: grid;
				/* grid-template-columns: repeat(5, 1fr); */
				grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
				gap: 30px 15px;
				max-width: 1200px;
				margin: 0 auto;
			}

			.generated-div {
				background: white;
				border-radius: 8px;
				padding: 15px;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;
				text-align: center;
			}

			.generated-div:hover {
				transform: translateY(-5px);
				box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
			}

			h1 {
				text-align: center;
				color: #333;
				margin-bottom: 30px;
			}

			h1 {
				font-size: if(media(width >=1200px): 3rem; media(width >=768px): 2.5rem; media(width >=480px): 2rem; else: 1.75rem);
			}
		</style>
	</head>
	<body>
		
		<a href="https://mp.weixin.qq.com/s/vuVe_EbsvEYpS7TPaMAVLg">CSS if() 函数已经来了！</a>
		<h1>50个自动生成的Div</h1>
		<div class="container" id="divContainer"></div>

		<script>
			document.addEventListener('DOMContentLoaded', function() {
				const container = document.getElementById('divContainer');

				for (let i = 1; i <= 50; i++) {
					const div = document.createElement('div');
					div.className = 'generated-div';
					div.textContent = `Div ${i}`;
					div.style.backgroundColor = `hsl(${i * 7.2}, 70%, 85%)`;
					container.appendChild(div);
				}
			});
		</script>
	</body>
</html>
